<template>
  <div class="relation-container">
    <!-- 按钮 -->
    <div class="head-main">
      <div style="margin-right: 90px;">{{tableTitle}}</div>
      <div>
        <el-button type="danger" size="mini" plain @click="addRelation()">添加条件</el-button>
        <el-button type="danger" size="mini" plain @click="saveRelation()">保存</el-button>
      </div>
    </div>
    <!-- 配置条件具体内容 -->
    <div class="condition-main">
      <!-- 单个条件 -->
      <el-row v-for="(item,index) in conditionList" :key="index" style="margin-bottom: 24px;position: relative;">
        <el-form :model="item" ref="conditionForm" :rules="rules" label-width="0" class="search_container">
          <!-- 条件关系：或与且 -->
          <div v-if="index < conditionList.length - 1" class="condition-relation" @click="conditionRelationClick(item)">{{item.conditionRelation}}</div>
          <el-col :span="4">
            <!-- 逻辑符 -->
            <el-form-item prop="logicCharacter">
              <el-select v-model="item.logicCharacter" placeholder="请选择" clearable>
                <el-option
                  v-for="item in logicDic"
                  :key="item.dictValue"
                  :label="item.dictValue"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center;margin-top: 2px;">
            <i class="el-icon-circle-plus" @click="plusClick(item)"></i>
          </el-col>
          <!-- 输入框 -->
          <el-col :span="source=='special' ? 10 : 6" v-if="(item.value || item.value === 0) || item.unit || item.showValue">
            <!-- 特殊评分规则 -->
            <!-- <el-form-item prop="value" v-if="source=='special'" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-select v-model="item.value" placeholder="请选择" clearable>
                <el-option
                  v-for="item in unitDic"
                  :key="item.unit"
                  :label="item.unit"
                  :value="item.unit">
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item prop="value" v-if="source=='special'">
              <el-input @change="(val)=>checkValue(val,item)" v-model="item.value" placeholder="请输入"></el-input>
            </el-form-item>
            <!-- 其他 -->
            <el-form-item prop="value" v-else>
              <el-input-number v-model="item.value" placeholder="请输入"></el-input-number>
            </el-form-item>
          </el-col>
          <!-- 单位 -->
          <el-col :span="4" v-if="((item.value || item.value === 0) || item.unit || item.showValue) && (source=='physical')">
            <el-form-item>
              <el-select v-model="item.unit" placeholder="请选择" clearable>
                <el-option
                  v-for="item in unitDic"
                  :key="item.unit"
                  :label="item.unit"
                  :value="item.unit">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center;" v-if="index !== 0">
            <i class="el-icon-delete" @click="deleteClick(item,index)"></i>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import constant from '@/utils/constant';
export default {
  props: {
    tableTitle: {
      type: String,
      default: ''
    },
    source: {
      type: String,
      default: ''
    },
    logicDic: {
      type: Array,
      default: ()=>{
        return []
      }
    }
  },
  data(){
    return {
      unitDic: [],  //单位的字典
      currentRow: null,
      conditionField: '',
      conditionList: [
        {
          logicCharacter:'',
          value: undefined,
          unit: '',
          showValue: false,
          conditionRelation:'',
        }
      ],
      rules: {
        logicCharacter: [{ required: true, message: '请选择逻辑符', trigger: 'change' }],
        value: [{ required: true, message: '请输入条件值', trigger: 'blur' }],
      }
    }
  },
  methods: {
    checkValue(val,item){
      let containsSpecialChars = /[\#^\(\)"]/g.test(val);
      if(containsSpecialChars){
        this.$message.warning('不允许输入特殊字符!')
        item.value = '';
      }
    },
    // 处理配置条件列表数据
    handleRelation(field){
      this.conditionField = field
      if(this.currentRow[field]) {
        let conditionList = []
        let splitArr = this.currentRow[field].split('#')
        splitArr.forEach(item=>{
          if(item){
            let conditionSplit = item.split('^')
            let _index = -1
            if(conditionSplit.indexOf('且') > -1) _index = conditionSplit.indexOf('且')
            if(conditionSplit.indexOf('或') > -1) _index = conditionSplit.indexOf('或')
            conditionList.push({
              logicCharacter: conditionSplit[1] || '',
              value: conditionSplit[2] && (conditionSplit[2] != '且' && conditionSplit[2] != '或') ? conditionSplit[2].replace(/\("/g, '').replace(/\"\)/g, '') : undefined,
              unit:  conditionSplit[3] && (conditionSplit[3] != '且' && conditionSplit[3] != '或') ? conditionSplit[3].replace(/\$/, '') : '',
              conditionRelation: _index > -1 ? conditionSplit[_index] : '',
            })
          }
        })
        this.conditionList = conditionList
      }
    },
    // 获取单位列表
    getMeasurementUnit(url,params){
      this.unitDic = []
      url(params).then(res => {
				if (res.resultCode == constant.SUCCESS) {
          this.unitDic = res.data || []
				}
			})
    },
    // 点击添加条件按钮
    addRelation(){
      this.conditionList[this.conditionList.length - 1].conditionRelation = '且'
      this.conditionList.push({
        logicCharacter:'',
        value: undefined,
        unit: '',
        showValue: false,
        conditionRelation:''
      })
    },
    // 点击保存按钮
    saveRelation(){
      let validFlag = true
      this.$refs.conditionForm.forEach(item=>{
        item.validate((valid) => {
          if(!valid) { validFlag = false }
        })
      })
      if(!validFlag) return
      // 处理测量结果字符串
      let measuringResult = ''
      let filterArr = this.conditionList.filter(fItem => {
        return !(!fItem.logicCharacter && !fItem.value && !fItem.unit)
      })
      if(filterArr.length){
        filterArr[filterArr.length - 1].conditionRelation = ''
        filterArr.forEach((item,index)=>{
          measuringResult = measuringResult + '#'
          if(item.logicCharacter) measuringResult = measuringResult + '^' + item.logicCharacter
          if(item.value || item.value === 0) {
            if(item.logicCharacter == '包含' || item.logicCharacter == '不包含') measuringResult = measuringResult + '^("' + item.value + '")'
            else measuringResult = measuringResult + '^' + item.value
          }
          if(item.unit) measuringResult = measuringResult + '^$' + item.unit
          if(item.conditionRelation) measuringResult = measuringResult + '^' + item.conditionRelation + '^'
        })
      }
      this.$set(this.currentRow,this.conditionField,measuringResult)
      this.$emit('saveRelation')
    },
    // 点击展开输入框+
    plusClick(item){
      this.$set(item,'showValue',true)
    },
    // 点击条件关系
    conditionRelationClick(item){
      // this.row.measuringResult = '2132132123'
      this.$set(item,'conditionRelation',item.conditionRelation == '且' ? '或' : '且')
    },
    // 点击删除
    deleteClick(item,index){
      this.conditionList.splice(index,1)
      this.conditionList[this.conditionList.length - 1].conditionRelation = ''
    }
  }
}
</script>

<style lang="less" scoped>
.relation-container{
  
}
// 配置条件弹窗
.head-main{
  display: flex;
  line-height: 30px;
  margin-bottom: 30px;
}
.condition-main{
  padding-left: 50px;
  height: 400px;
  overflow: auto;
}
.el-icon-circle-plus{
  color: #68a3fc;
  font-size: 26px;
  cursor: pointer;
}
.el-icon-delete{
  color: #68a3fc;
  font-size: 20px;
  margin-top: 7px;
  cursor: pointer;
}
.condition-relation{
  position: absolute;
  top: 47px;
  left: -46px;
  width: 25px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #dff1fb;
  color: #8dbafb;
  border-radius: 3px;
  font-weight: 700;
  cursor: pointer;
}
.condition-relation::before,.condition-relation::after{
  content: '';
  position: absolute;
  width: 4px;
  height: 30px;
  top: -30px;
  background: #dff1fb;
}
.condition-relation::after{
  top: 30px;
}
/deep/ .el-input-number__decrease,/deep/ .el-input-number__increase{
  display: none;
}
/deep/ .el-row{
  margin-bottom: 0px !important;
}
</style>